<script setup>

import QueryTableData from "./QueryTableData.vue";
import {ref, useTemplateRef} from "vue";
import SqlEditor from "./SqlEditor.vue";

import axios from "axios";

const metadata = ref({
  current: {
    conn: 'mysql',
    catalog: ['mysql'],
    database: 'mysql',
  },
  connects: [
    {name: 'Hive'},
    {name: 'Doris'}
  ],
  catalogs: [
    {label: 'mysql',value: 'mysql'},
    {label: 'hive',value: 'hive'},
    {label: 'doris',value: 'doris'}
  ],
  editor: {
    target: null,
    sql_select: "",
    sql_content: "",
    run_loading: false,
    options: {
      mode: "ace/mode/sql",
      selectionStyle: "text",
      // 激活自动提示
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true,
    }
  },
  data: {
    columns: [],
    row: []
  }
})


const run = ()=> {
  const editor = metadata.value.editor.target;
  metadata.value.editor.run_loading = true;

  const sql = editor.getSelectedText().trim().length>0 ? editor.getSelectedText() : editor.getValue();
  metadata.value.editor.sql_content = editor.getValue();
  const req_data = {
    connect_id: metadata.value.current.conn,
    connect: metadata.value.current.conn,
    action: "TABLE_DATA",
    catalog: metadata.value.current.catalog[0],
    database: metadata.value.current.database,
    execute_sql: sql
  }

  axios.post("/v1/api/query/run",req_data).then((res)=>{
    const cols = res.data.list.columns
    const columns = []
    for (const col in cols) {
      columns.push({
        key: cols[col].name,
        dataKey: cols[col].name,
        title: cols[col].name,
        width: 200,
        maxWidth: 1200,
        fixed: false
      })
    }
    metadata.value.data.columns = columns;
    metadata.value.data.row = res.data.list.row;
    console.log("data",metadata.value.data);
  });
  console.log("selectionText: " ,editor.getSelectedText());
  //const selectionText = metadata.value.editor.target.getModel().getValueInRange(selection);
  //console.log("selectionText: " ,selectionText)
}

</script>

<template>
<el-container class="queried-content">
  <el-header class="queried-header editor-header">
    <el-form inline class="editor-header-ds" label-suffix=":">
      <el-space>
        <el-form-item label="Conn">
          <el-select v-model="metadata.current.conn" style="width: 100px;">
            <el-option
                v-for="ds in metadata.connects"
                :key="ds.name"
                :label="ds.name"
                :value="ds.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Catalog">
          <el-cascader v-model="metadata.current.catalog"
                       :options="metadata.catalogs"/>
        </el-form-item>
        <el-form-item label="Action">
          <el-button type="primary" @click="run">Run</el-button>
        </el-form-item>
      </el-space>
    </el-form>
  </el-header>
  <el-main class="queried-main">
    <el-splitter
        layout="vertical"
        class="queried-content"
    >
      <el-splitter-panel style="padding-top: 5px" size="280px">
        <sql-editor ref="sql_editor" :metadata="metadata"/>
      </el-splitter-panel>
      <el-splitter-panel>
        <query-table-data :metadata='metadata'/>
      </el-splitter-panel>
    </el-splitter>
  </el-main>
</el-container>
</template>

<style scoped>
.editor-header{
  display: flex;
  flex-flow: nowrap;
  justify-content: left;
  align-items: center;
  justify-items: center;
  padding-left: 10px;
  z-index: 1025;
  box-shadow: 0 1px 15px 0 rgba(0,0,0,0.2);
}
.editor-header-ds.el-form--inline .el-form-item{
  padding: 0;
  margin: 0;
  height: 40px;
  justify-content: center;
  align-items: center;
  line-height: 40px;
}
</style>